<!-- //修改交易密码 验证旧密码页面 -->
<template>
    <div >
        <div class="header">
            <van-nav-bar  title=""  left-text="" right-text="" left-arrow @click-left="back"  />
        </div>

        <van-cell class="text" :border="false" center title="修改交易密码" label="请输入旧交易密码，以验证身份" />

        <div class="inputBox">
<!-- 密码输入框 -->
<van-password-input
  :value="value"
  :length="6"
  :gutter="10"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<div class="forgotPassword" @click="forgotPassword">忘记密码？</div>

<!-- 数字键盘 -->
<van-number-keyboard
  v-model="value"
  :show="showKeyboard"
  @blur="showKeyboard = false"
/>

          
        
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast,PasswordInput, NumberKeyboard  } from 'vant';
Vue.use(Toast,PasswordInput,NumberKeyboard);

export default {
    name: "ChangeTransactionPassword",
    components: {
      },
    data(){
        return{
            value: '',
            showKeyboard: true,
            submit:false,    //密码长度需和后台获取到的旧密码一致才能提交
            oldvalue:''   //从后台发请求调取旧密码
        }
    },
    created() {
        this.oldvalue = this.$store.state.TransactionPassword
    },
    watch: {
        value(value) {
            if (value.length == 6) {
                if (value == this.oldvalue) {
                    this.submit=true
                    console.log('与旧密码一致,可以跳转到下页面设置新密码');
                    this.$router.push({ path:'/newTransactionPassword'})
                }else{
                    Toast('请输入正确密码');
                    this.value=''
                }
            }
        },
    },
    methods:{
        back() {
            this.$router.go(-1)
        },


        forgotPassword(){
            this.$router.push({ path:'/ForgotTradingPassword'})
        }
    }
}
</script>

<style scoped>
    .text{
        font-size: 24px;
    }
    .btn{
    margin: 80px auto ;
    }
    .inputBox{
        margin: 50px auto ;
        width: 92%;
    }
    .forgotPassword{
    margin: 25px auto;
    text-align: center;
    color: #797979;
    font-size: 14px;
}
.van-password-input__security li{
        background-color: #f2f2f2;
    }




</style>
